<template>
  <div class="mainPage">
    <el-card class="fast">
      <div slot="header" class="cardHeader">
        <span>快捷操作</span>
      </div>
      <div>
        <el-button type="primary">创建考试</el-button>
        <el-button type="primary">查看成绩</el-button>
        <el-button type="primary">导入题库</el-button>
        <el-button type="primary">添加学生</el-button>
        <el-button type="primary">发布通知</el-button>
      </div>
    </el-card>
    <el-card class="fast">
      <div slot="header" class="cardHeader">
        <span>实时考试人数</span>
      </div>
      <div style="text-align:center">
        <span style="font-size:50px">92</span>人
      </div>
    </el-card>
    <el-card class="announcement">
      <div slot="header" class="cardHeader">
        <span>最近公告</span>
        <el-button style="float: right; padding: 3px 0" type="text">更多></el-button>
      </div>
      <div
        v-for="(item, index) in noticeContent"
        :key="item.id"
        class="text item"
      >
        <img
          src="../../assets/icon/arrow.png"
          style="width: 1pc; margin: 5px"
        />
        <a href="www.baidu.com" style="margin-bottom: 5px"
          >{{ index + 1 }}. {{ item.content }}</a
        >
      </div>
    </el-card>
    <el-card class="ongoingExamination">
      <div slot="header" class="cardHeader">
        <span>正在进行的考试</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >更多></el-button
        >
      </div>
      <horizon-tips
        :tipsData="ongoingExamination"
        style="width: 100%; height: 100%"
      ></horizon-tips>
    </el-card>
    <el-card class="completedExamination">
      <div slot="header" class="cardHeader">
        <span>已完成的考试</span>
        <el-button style="float: right; padding: 3px 0" type="text"
          >更多></el-button
        >
      </div>
      <el-table :data="tableData" height="250px" style="width: 100%">
        <el-table-column label="考试时间" prop="examdate"> </el-table-column>
        <el-table-column label="考试名称" prop="examname"> </el-table-column>
        <el-table-column label="考试人数" prop="examaddr"> </el-table-column>
        <el-table-column align="right">
          <template slot="header">
            <el-input
              v-model="search"
              size="mini"
              placeholder="输入关键字搜索"
            />
          </template>
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              @click="handleEdit(scope.$index, scope.row)"
              >查看详情</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script>
import horizonTips from "../../customedElement/horizonTips.vue";
export default {
  components: { horizonTips },
  data() {
    return {
      // 考试列表
      tableData: null,
      // 搜索栏
      search: "",
      // 通告栏
      noticeContent: null,
      // 正在考试的列表
      ongoingExamination: [
        {
          name: "期中考试",
          object: "软件工程2班",
          begin: "2021-10-2 10:00",
          end: "2021-10-2 12:00",
          duration: "120",
        },
        {
          name: "课堂测试",
          object: "计算机3班",
          begin: "2021-10-2 10:00",
          end: "2021-10-2 12:00",
          duration: "120",
        },
      ],
      // ongoingExamination: null
    };
  },
  methods: {
    handleEdit(index, row) {
      console.log(index, row);
    },
    handleDelete(index, row) {
      console.log(index, row);
    },
    initData() {
      // 获得通告列表
      this.$http
        .get("notice/list")
        .then((response) => (this.noticeContent = response.data))
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          console.log("请求最近公告信息成功");
        });
      // 获得考试列表
      this.$http
        .get("exam/list")
        .then((response) => (this.tableData = response.data))
        .catch(function (error) {
          console.log(error);
        })
        .then(function () {
          console.log("请求所有考试信息成功");
        });
    },
  },
  mounted() {
    this.initData();
  },
};
</script>

<style>
.mainPage {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 10px;
}
.announcement {
  float: left;
  text-align: left;
  width: 48%;
  height: 40%;
  margin: 1%;
}
.ongoingExamination {
  float: right;
  text-align: left;
  width: 48%;
  height: 40%;
  margin: 1%;
}
.completedExamination {
  float: bottom;
  text-align: left;
  width: 98%;
  height: 55%;
  margin: 1%;
}
.fast {
  float: left;
  text-align: left;
  width: 48%;
  height: 25%;
  margin: 1%;
}
.cardHeader {
  text-align: left;
}
</style>